<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-11-04 17:59:31
 * @LastEditTime: 2024-11-04 17:59:31
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \markdown-magic\src\pages\TextDiffer\page\entry\index copy.vue
 * Copyright 版权声明
-->
<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-11-04 15:02:16
 * @LastEditTime: 2024-11-04 17:51:30
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \markdown-magic\src\pages\TextDiffer\page\entry\index.vue
 * Copyright 版权声明
-->

<template>
  <div class="pageWrap">
    <codemirror ref="cm1" v-model="text1" :options="cmOptions"></codemirror>
    <codemirror ref="cm2" v-model="text2" :options="cmOptions"></codemirror>
    <button @click="compareTexts">比对</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import DiffMatchPatch from 'diff-match-patch'

const text1 = ref(`console.log("Hello, World!");\n`);
const text2 = ref(`console.log("Hello, Vue3!");\n`);
const cmOptions = ref({
  mode: 'javascript',
  theme: 'base16-dark',
  lineNumbers: true,
  readOnly: true
});

const cm1 = ref(null)
const cm2 = ref(null)

const compareTexts = () => {
  const dmp = new DiffMatchPatch();
  console.log(`🚀 ~ compareTexts ~ dmp:`, dmp)
  const diff = dmp.diff_main(text1.value, text2.value);
  console.log(`🚀 ~ compareTexts ~ diff:`, diff)
  dmp.diff_cleanupSemantic(diff);

  console.log('---', cm1.value.save())

  // // // const cm1 = cm1.value.codemirror;
  // // // const cm2 = cm2.value.codemirror;
  // // const cm1 = ref(null)
  // // console.log(`🚀 ~ compareTexts ~ cm1:`, cm1.value)
  // // const cm2 = ref(null)
  // // console.log(`🚀 ~ compareTexts ~ cm2:`, cm2)

  // cm1.getDoc().setValue('');
  // cm2.getDoc().setValue('');

  // diff.forEach(([change, text]) => {
  //   const cm = change === 1 ? cm1 : cm2;
  //   cm.getDoc().setValue(cm.getDoc().getValue() + text);
  //   if (change === -1) {
  //     cm.getDoc().markText({ line: 0, ch: 0 }, { line: 0, ch: text.length }, { className: 'diff-removed' });
  //   } else if (change === 1) {
  //     cm.getDoc().markText({ line: 0, ch: 0 }, { line: 0, ch: text.length }, { className: 'diff-added' });
  //   }
  // });
};
</script>

<style lang="scss" scoped>
.pageWrap {
  padding: 16px;
  .diff-added {
    background-color: green;
  }
  .diff-removed {
    background-color: red;
  }
}
</style>